<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 表单设计演示</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置 Tailwind -->
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5', // 靛蓝色作为主色调
                        secondary: '#10B981', // 绿色作为成功色
                        danger: '#EF4444',   // 红色作为错误色
                        neutral: {
                            50: '#F9FAFB',
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .form-input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .form-label {
                @apply block text-sm font-medium text-neutral-700 dark:text-neutral-200 mb-1;
            }
            .form-error {
                @apply text-danger text-xs mt-1 hidden;
            }
        }
    </style>
</head>

<body class="font-inter bg-neutral-50 dark:bg-neutral-900 text-neutral-800 dark:text-neutral-100 min-h-screen transition-colors duration-300">
    <!-- 页面容器 -->
    <div class="container mx-auto px-4 py-8 md:py-16 max-w-6xl">
        <!-- 头部 -->
        <header class="text-center mb-10 md:mb-16">
            <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-neutral-800 dark:text-white mb-4">
                现代表单设计
            </h1>
            <p class="text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto text-lg">
                这个演示展示了使用 Tailwind CSS 构建的响应式表单，包含多种输入类型和交互效果
            </p>
            
            <!-- 暗黑模式切换 -->
            <button id="theme-toggle" class="mt-6 p-2 rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors">
                <i class="fa fa-sun-o dark:hidden text-yellow-500"></i>
                <i class="fa fa-moon-o hidden dark:inline-block text-blue-300"></i>
            </button>
        </header>
        
        <!-- 表单卡片 -->
        <div class="bg-white dark:bg-neutral-800 rounded-2xl shadow-lg p-6 md:p-8 max-w-3xl mx-auto transition-all duration-300 hover:shadow-xl">
            <form id="demo-form" class="space-y-6">
                <!-- 个人信息部分 -->
                <div>
                    <h2 class="text-xl font-semibold mb-4 pb-2 border-b border-neutral-200 dark:border-neutral-700">个人信息</h2>
                    
                    <!-- 姓名 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="first-name" class="form-label">姓氏</label>
                            <input 
                                type="text" 
                                id="first-name" 
                                class="w-full px-4 py-2.5 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-700 form-input-focus transition-colors"
                                placeholder="请输入姓氏"
                                required
                            >
                            <p class="form-error" id="first-name-error">请输入您的姓氏</p>
                        </div>
                        
                        <div>
                            <label for="last-name" class="form-label">名字</label>
                            <input 
                                type="text" 
                                id="last-name" 
                                class="w-full px-4 py-2.5 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-700 form-input-focus transition-colors"
                                placeholder="请输入名字"
                                required
                            >
                            <p class="form-error" id="last-name-error">请输入您的名字</p>
                        </div>
                    </div>
                    
                    <!-- 邮箱和电话 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                        <div>
                            <label for="email" class="form-label">电子邮箱</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500 dark:text-neutral-400">
                                    <i class="fa fa-envelope-o"></i>
                                </span>
                                <input 
                                    type="email" 
                                    id="email" 
                                    class="w-full pl-10 px-4 py-2.5 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-700 form-input-focus transition-colors"
                                    placeholder="your.email@example.com"
                                    required
                                >
                            </div>
                            <p class="form-error" id="email-error">请输入有效的电子邮箱</p>
                        </div>
                        
                        <div>
                            <label for="phone" class="form-label">手机号码</label>
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500 dark:text-neutral-400">
                                    <i class="fa fa-phone"></i>
                                </span>
                                <input 
                                    type="tel" 
                                    id="phone" 
                                    class="w-full pl-10 px-4 py-2.5 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-700 form-input-focus transition-colors"
                                    placeholder="请输入手机号码"
                                    required
                                >
                            </div>
                            <p class="form-error" id="phone-error">请输入有效的手机号码</p>
                        </div>
                    </div>
                </div>
                
                <!-- 地址信息部分 -->
                <div>
                    <h2 class="text-xl font-semibold mb-4 pb-2 border-b border-neutral-200 dark:border-neutral-700">地址信息</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <label for="country" class="form-label">国家/地区</label>
                            <select 
                                id="country" 
                                class="w-full px-4 py-2.5 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-700 form-input-focus transition-colors appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10l5 5 5-5z\" fill=\"%23374151\"/></svg>')] bg-[length:1em_1em] bg-no-repeat bg-right bg-center dark:bg-[url('data:image/svg+xml;charset=US-ASCII,<svg width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 10l5 5 5-5z\" fill=\"%23F3F4F6\"/></svg>')]"
                            >
                                <option value="">请选择</option>
                                <option value="cn" selected>中国</option>
                                <option value="us">美国</option>
                                <option value="jp">日本</option>
                                <option value="uk">英国</option>
                            </select>
                        </div>
                        
                        <div class="md:col-span-2">
                            <label for="city" class="form-label">城市</label>
                            <input 
                                type="text" 
                                id="city" 
                                class="w-full px-4 py-2.5 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-700 form-input-focus transition-colors"
                                placeholder="请输入城市"
                            >
                        </div>
                    </div>
                    
                    <div class="mt-6">
                        <label for="address" class="form-label">详细地址</label>
                        <textarea 
                            id="address" 
                            rows="3" 
                            class="w-full px-4 py-2.5 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-700 form-input-focus transition-colors resize-none"
                            placeholder="请输入详细地址"
                        ></textarea>
                    </div>
                </div>
                
                <!-- 偏好设置部分 -->
                <div>
                    <h2 class="text-xl font-semibold mb-4 pb-2 border-b border-neutral-200 dark:border-neutral-700">偏好设置</h2>
                    
                    <!-- 通知方式 -->
                    <div class="mb-6">
                        <p class="form-label">通知方式</p>
                        <div class="space-y-3 mt-2">
                            <div class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    id="notify-email" 
                                    class="w-4 h-4 text-primary focus:ring-primary/30 rounded transition-all"
                                    checked
                                >
                                <label for="notify-email" class="ml-2 text-neutral-700 dark:text-neutral-300">电子邮件</label>
                            </div>
                            
                            <div class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    id="notify-sms" 
                                    class="w-4 h-4 text-primary focus:ring-primary/30 rounded transition-all"
                                >
                                <label for="notify-sms" class="ml-2 text-neutral-700 dark:text-neutral-300">短信</label>
                            </div>
                            
                            <div class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    id="notify-push" 
                                    class="w-4 h-4 text-primary focus:ring-primary/30 rounded transition-all"
                                >
                                <label for="notify-push" class="ml-2 text-neutral-700 dark:text-neutral-300">推送通知</label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 性别 -->
                    <div class="mb-6">
                        <p class="form-label">性别</p>
                        <div class="space-y-3 mt-2">
                            <div class="flex items-center">
                                <input 
                                    type="radio" 
                                    id="gender-male" 
                                    name="gender" 
                                    class="w-4 h-4 text-primary focus:ring-primary/30 transition-all"
                                    checked
                                >
                                <label for="gender-male" class="ml-2 text-neutral-700 dark:text-neutral-300">男</label>
                            </div>
                            
                            <div class="flex items-center">
                                <input 
                                    type="radio" 
                                    id="gender-female" 
                                    name="gender" 
                                    class="w-4 h-4 text-primary focus:ring-primary/30 transition-all"
                                >
                                <label for="gender-female" class="ml-2 text-neutral-700 dark:text-neutral-300">女</label>
                            </div>
                            
                            <div class="flex items-center">
                                <input 
                                    type="radio" 
                                    id="gender-other" 
                                    name="gender" 
                                    class="w-4 h-4 text-primary focus:ring-primary/30 transition-all"
                                >
                                <label for="gender-other" class="ml-2 text-neutral-700 dark:text-neutral-300">其他</label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 兴趣爱好 -->
                    <div>
                        <label for="interests" class="form-label">兴趣爱好 (可多选)</label>
                        <select 
                            id="interests" 
                            multiple 
                            class="w-full px-4 py-2.5 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-700 form-input-focus transition-colors h-32"
                        >
                            <option value="reading">阅读</option>
                            <option value="sports">运动</option>
                            <option value="music">音乐</option>
                            <option value="travel">旅行</option>
                            <option value="cooking">烹饪</option>
                            <option value="gaming">游戏</option>
                            <option value="photography">摄影</option>
                        </select>
                        <p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">按住 Ctrl 键可多选</p>
                    </div>
                </div>
                
                <!-- 隐私政策同意 -->
                <div class="pt-2">
                    <div class="flex items-start">
                        <input 
                            type="checkbox" 
                            id="terms" 
                            class="w-4 h-4 mt-1 text-primary focus:ring-primary/30 rounded transition-all"
                            required
                        >
                        <label for="terms" class="ml-2 text-sm text-neutral-700 dark:text-neutral-300">
                            我已阅读并同意<a href="#" class="text-primary hover:underline">隐私政策</a>和<a href="#" class="text-primary hover:underline">服务条款</a>
                        </label>
                    </div>
                    <p class="form-error" id="terms-error">请同意我们的条款和政策</p>
                </div>
                
                <!-- 提交按钮 -->
                <div class="pt-4 flex flex-col sm:flex-row gap-4">
                    <button 
                        type="submit" 
                        class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-primary/50 active:translate-y-0"
                    >
                        <i class="fa fa-paper-plane mr-2"></i>提交表单
                    </button>
                    
                    <button 
                        type="reset" 
                        class="flex-1 bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-neutral-800 dark:text-neutral-200 font-medium py-3 px-6 rounded-lg transition-all duration-300"
                    >
                        <i class="fa fa-refresh mr-2"></i>重置
                    </button>
                </div>
            </form>
        </div>
        
        <!-- 表单提交结果 -->
        <div id="form-success" class="max-w-3xl mx-auto mt-8 bg-secondary/10 dark:bg-secondary/20 border border-secondary/30 rounded-xl p-6 text-center hidden">
            <div class="w-16 h-16 bg-secondary/20 dark:bg-secondary/30 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-check text-2xl text-secondary"></i>
            </div>
            <h3 class="text-xl font-semibold text-secondary mb-2">表单提交成功！</h3>
            <p class="text-neutral-600 dark:text-neutral-400">感谢您的提交，我们会尽快处理您的信息。</p>
        </div>
    </div>
    
    <script>
        // 暗黑模式切换
        const htmlElement = document.documentElement;
        const themeToggle = document.getElementById('theme-toggle');
        
        // 检查用户偏好或本地存储的设置
        function checkDarkModePreference() {
            const savedMode = localStorage.getItem('darkMode');
            if (savedMode !== null) {
                return savedMode === 'true';
            }
            return window.matchMedia('(prefers-color-scheme: dark)').matches;
        }
        
        // 应用暗黑模式
        function applyDarkMode(isDark) {
            if (isDark) {
                htmlElement.classList.add('dark');
            } else {
                htmlElement.classList.remove('dark');
            }
            localStorage.setItem('darkMode', isDark);
        }
        
        // 初始化暗黑模式
        applyDarkMode(checkDarkModePreference());
        
        // 绑定暗黑模式切换事件
        themeToggle.addEventListener('click', () => {
            const isDark = htmlElement.classList.toggle('dark');
            applyDarkMode(isDark);
        });
        
        // 表单验证
        const form = document.getElementById('demo-form');
        const formSuccess = document.getElementById('form-success');
        
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            let isValid = true;
            
            // 验证姓名字段
            const firstName = document.getElementById('first-name');
            const firstNameError = document.getElementById('first-name-error');
            if (!firstName.value.trim()) {
                showError(firstName, firstNameError);
                isValid = false;
            } else {
                hideError(firstName, firstNameError);
            }
            
            const lastName = document.getElementById('last-name');
            const lastNameError = document.getElementById('last-name-error');
            if (!lastName.value.trim()) {
                showError(lastName, lastNameError);
                isValid = false;
            } else {
                hideError(lastName, lastNameError);
            }
            
            // 验证邮箱
            const email = document.getElementById('email');
            const emailError = document.getElementById('email-error');
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email.value.trim())) {
                showError(email, emailError);
                isValid = false;
            } else {
                hideError(email, emailError);
            }
            
            // 验证手机号
            const phone = document.getElementById('phone');
            const phoneError = document.getElementById('phone-error');
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(phone.value.trim())) {
                showError(phone, phoneError);
                isValid = false;
            } else {
                hideError(phone, phoneError);
            }
            
            // 验证条款同意
            const terms = document.getElementById('terms');
            const termsError = document.getElementById('terms-error');
            if (!terms.checked) {
                termsError.classList.remove('hidden');
                isValid = false;
            } else {
                termsError.classList.add('hidden');
            }
            
            // 如果表单验证通过
            if (isValid) {
                // 显示成功消息
                formSuccess.classList.remove('hidden');
                formSuccess.scrollIntoView({ behavior: 'smooth', block: 'start' });
                
                // 5秒后隐藏成功消息
                setTimeout(() => {
                    formSuccess.classList.add('hidden');
                }, 5000);
                
                // 重置表单
                form.reset();
            }
        });
        
        // 错误提示显示函数
        function showError(input, errorElement) {
            input.classList.add('border-danger');
            input.classList.remove('border-neutral-300', 'dark:border-neutral-600');
            errorElement.classList.remove('hidden');
        }
        
        // 错误提示隐藏函数
        function hideError(input, errorElement) {
            input.classList.remove('border-danger');
            input.classList.add('border-neutral-300', 'dark:border-neutral-600');
            errorElement.classList.add('hidden');
        }
        
        // 输入框实时验证
        const inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
        inputs.forEach(input => {
            input.addEventListener('input', () => {
                const errorId = input.id + '-error';
                const errorElement = document.getElementById(errorId);
                
                if (errorElement && !input.value.trim()) {
                    showError(input, errorElement);
                } else if (errorElement) {
                    hideError(input, errorElement);
                }
            });
        });
    </script>
</body>
</html>
    